<template>
	<view class="">
		<view class="nav bgf">
			<u-tabs :list="tabs_list" :current='current' @click="selectTabs" lineWidth='64rpx' lineHeight='6rpx'
				lineColor='#2A71C0' :activeStyle="{
            color: '#2A71C0',
            fontWeight: 'bold',
			fontSize:'26rpx',
            transform: 'scale(1.05)'
        }" :inactiveStyle="{
            color: '#666666',
			fontSize:'26rpx',
            transform: 'scale(1)'
        }" itemStyle="width:14%; height: 80rpx;"></u-tabs>
		</view>

		<view class="" v-if="order_list.length>0">
			<view class="m2432 p24 bgf br12" v-for="(item,index) in order_list" :key="item.id"
				@click="goOrderDetails(item)">
				<view class="flex_btw">
					<image class="img72 br8" :src="item.shop.image_str" mode=""></image>
					<view class="flex1 ml12">
						<view class="c3 fw500 fs28 sn1">{{item.shop.title}}</view>
						<view class="c9 fw500 fs24">下单时间：{{item.createtime_text}}</view>
					</view>
					<view class="ml10 state fs24 fw500">
						<view class="c2a7 tr">
							<text v-if="current == 0">待付款</text>
							<text v-if="current == 1">待投放</text>
							<text v-if="current == 2">清洗中</text>
							<text v-if="current == 3">待取货</text>
							<text v-if="current == 4">已完成</text>
						</view>
						<view class="cf0 mt4 flex_x flex_y_end" v-if="current == 0">
							<view class="">剩余</view>
							<view class="">
								<u-count-down :time="item.countDown" format="mm:ss" autoStart
									@change.stop="onChange(index,$event)" @finish.stop='finish'>
									<view class="">
										<text class="">{{ item.timeData.minutes }}:</text>
										<text class="">{{ item.timeData.seconds }}</text>
									</view>
								</u-count-down>
							</view>
						</view>
					</view>
				</view>

				<view class="mt40 flex btw">
					<view class="flex1 flex_btw">
						<view class="state" v-for="itema in item.goods">
							<image class="img120 br12" :src="itema.image_str" mode="">
							</image>
							<view class="mt4 c3 fw500 fs24 sn1">{{itema.goods_name}}</view>
						</view>
					</view>
					<view class="state ml10 mt18">
						<view class="c3 fw500 tr">
							<text class="fs24">￥</text>
							<text class="fs32">{{item.pay_money}}</text>
						</view>
						<view class="mt10 c9 fs22 tr">共{{item.total}}件</view>
					</view>
				</view>

				<view class="mt32 flex_y_end fs26" v-if="current == 0">
					<view class="btn btna flex_c c2a7" @click.stop="operation(1,item,index)">取消订单</view>
					<view class="btn bg2a7 cf flex_c ml20" @click.stop="operation(2,item,index)">立即支付</view>
					<!-- <view class="btn btna c2a7 flex_c ml20" @click.stop="operation(3)">存货码</view> -->
				</view>

			</view>
		</view>
		<view class="" v-else>
			<u-empty mode="order" icon="http://cdn.uviewui.com/uview/empty/order.png">
			</u-empty>
		</view>

		<hintPopup :show.sync="showCancel" hint='确认删除' title='请确认是否取消该订单？' color="#2A71C0" @confirm='confirm'>
		</hintPopup>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';
	import wxApplet from '../../../../utils/wxApplet/wxApplet.js'
	export default {
		props: {
			list: {
				default: []
			}
		},
		components: {},
		data() {
			return {
				tabs_list: [{
						name: '待付款',
					}, {
						name: '待投放',
					}, {
						name: '清洗中',
					},
					{
						name: '待取货',
					},
					{
						name: '已完成',
					}
				],
				order_list: [], //订单列表

				showCancel: false, //取消弹窗
				cancel_id: '', //取消id
				cancel_index: '', //取消index
			}
		},
		methods: {

			selectTabs(e) { //切换订单状态
				console.log(e);
				this.$store.commit('save_user_order_active', e.index)
			},
			onChange(index, e) { //倒计时;
				this.order_list[index].timeData = e
			},
			finish() { //倒计时结束
				this.$parent.getUserAddress(true);
			},
			operation(e, item, index) { //操作
				if (e == 1) { //取消订单
					this.cancel_id = item.id //取消id
					this.cancel_index = index //取消index
					this.showCancel = true
				} else if (e == 2) { //立即支付
					this.$u.debounce(this.orderPay(item.id), 500) //防抖
				}
			},
			confirm() { //确认取消订单
				this.$api.orderCancel({
					id: this.cancel_id
				}).then(res => {
					if (res.code == 1) {
						this.$parent.del_list(this.cancel_index);
					}
					this.showCancel = false
					uni.$u.toast(res.msg)
				})
			},
			orderPay(e) { //立即支付
				this.$api.orderPay({
					id: e
				}).then(res => {
					if (res.code == 1) {
						wxApplet.wxPay(res.data).then(res => {
							this.$toast.toast('支付成功', () => {
								this.$store.commit('save_user_order_active', 1)
							})
						}).catch(err => {
							this.$toast.toast('支付失败')
						})
					} else {
						uni.$u.toast(res.msg)
					}
				})
			},


			goOrderDetails(item) { //订单详情
				uni.navigateTo({
					url: `/pages/user/my/orderDetails/orderDetails?id=${item.id}`
				})
			}
		},
		computed: {
			...mapState({
				current: state => state.user_order_active,
			})
		},
		watch: {
			list: {
				handler(news) {
					// console.log(news);
					this.order_list = news
				},
				immediate: true,
			},
		}
	}
</script>

<style lang="scss" scoped>
	.nav {
		position: sticky;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 99;
		border-top: 1upx solid #F0F0F0;
	}

	.state {
		width: 120upx;
	}

	.btn {
		width: 170upx;
		height: 56upx;
		border-radius: 36upx;
		border: 2upx solid #fff;
	}

	.btna {
		border: 2upx solid #2A71C0;
	}
</style>
